<%@ page language="java" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getServerName() + ":" + request.getServerPort() + path + "/";
    String basePath2 =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <style>
    textarea {
      height: 300px;
      width: 100%;
      resize: none;
      outline: none;
    }

    input[type=button] {
      float: right;
            margin: 5px;
            width: 50px;
            height: 35px;
            border: none;
            color: white;
            font-weight: bold;
            outline: none;
        }

        .clear {
            background: red;
        }

        .send {
            background: green;
        }

        .clear:active {
            background: yellow;
        }

        .send:active {
            background: yellow;
        }

        .msg {
            width: 100%;
            height: 25px;
            outline: none;
        }

        #content {
            border: 1px solid gray;
            width: 100%;
            height: 400px;
            overflow-y: scroll;
        }

        .from {
            background-color: green;
            width: 80%;
            border-radius: 10px;
            height: 30px;
            line-height: 30px;
            margin: 5px;
            float: left;
            color: white;
            padding: 5px;
            font-size: 22px;
        }

        .to {
            background-color: gray;
            width: 80%;
            border-radius: 10px;
            height: 30px;
            line-height: 30px;
            margin: 5px;
            float: right;
            color: white;
            padding: 5px;
            font-size: 22px;
        }

        .name {
            color: gray;
            font-size: 12px;
        }

        .tmsg_text {
            color: white;
            background-color: rgb(47, 47, 47);
            font-size: 18px;
            border-radius: 5px;
            padding: 2px;
        }

        .fmsg_text {
            color: white;
            background-color: rgb(66, 138, 140);
            font-size: 18px;
            border-radius: 5px;
            padding: 2px;
        }

        .sfmsg_text {
            color: white;
            background-color: rgb(148, 16, 16);
            font-size: 18px;
            border-radius: 5px;
            padding: 2px;
        }

        .tmsg {
            clear: both;
            float: right;
            width: 80%;
            text-align: right;
        }

        .fmsg {
            clear: both;
            float: left;
            width: 80%;
        }
    </style>
    <script>
      var path = '<%=basePath%>';
      var uid =${uid eq null?-1:uid};
      if (uid == -1) {
        location.href = "<%=basePath2%>";
      }
      var from = uid;
      var fromName = '${name}';
      var to = uid == 1 ? 2 : 1;

      var websocket;
      if ('WebSocket' in window) {
        websocket = new WebSocket("ws://" + path + "/ws?uid=" + uid);
      } else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://" + path + "/ws" + uid);
      } else {
        websocket = new SockJS("http://" + path + "/ws/sockjs" + uid);
      }
      websocket.onopen = function (event) {
        console.log("WebSocket:已连接");
        console.log(event);
      };
      websocket.onmessage = function (event) {
        var data = JSON.parse(event.data);
        console.log("WebSocket:收到一条消息", data);
        var textCss = data.from == -1 ? "sfmsg_text" : "fmsg_text";
        $("#content").append("<div class='fmsg'><label class='name'>"
            + data.fromName
            + "&nbsp;"
            + data.date
            + "</label><div class='"
            + textCss
            + "'>"
            + data.text
            + "</div></div>");
        scrollToBottom();
      };
      websocket.onerror = function (event) {
        console.log("WebSocket:发生错误 ");
        console.log(event);
      };
      websocket.onclose = function (event) {
        console.log("WebSocket:已关闭");
        console.log(event);
      }

      function sendMsg() {
        var v = $("#msg").val();
        if (v == "") {
          return;
        } else {
          var data = {};
          data["from"] = from;
          data["fromName"] = fromName;
          data["to"] = to;
          data["text"] = v;
          websocket.send(JSON.stringify(data));
          $("#content").append("<div class='tmsg'><label class='name'>我&nbsp;"
              + new Date().Format("yyyy-MM-dd hh:mm:ss")
              + "</label><div class='tmsg_text'>"
              + data.text
              + "</div></div>");
          scrollToBottom();
          $("#msg").val("");
        }
      }

      function scrollToBottom() {
        var div = document.getElementById('content');
        div.scrollTop = div.scrollHeight;
      }

      Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "h+": this.getHours(), //小时
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length
            == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      }

      function send(event) {
        var code;
        if (window.event) {
          code = window.event.keyCode; // IE
        } else {
          code = e.which; // Firefox
        }
        if (code == 13) {
          sendMsg();
        }
      }

      function clearAll() {
        $("#content").empty();
      }
    </script>
</head>
<body>
欢迎：${sessionScope.name }
<div id="content"></div>
<input type="text" placeholder="请输入要发送的信息" id="msg" class="msg" onkeydown="send(event)">
<input type="button" value="发送" class="send" onclick="sendMsg()">
<input type="button" value="清空" class="clear" onclick="clearAll()">
</body>
</html>
